<template>
	<view class="recordDetail">
		<view class="money flex-aj-center">
			<view>{{detail.changePoint || 0}}</view>
			<view>提现金额</view>
		</view>
		<view class="list flex">
			<view class="left">
				<view class="time" v-if="detail.txTime" :style="detail.txStatus==2?'':'margin-bottom:0;'" >
					<view>{{detail.txTime.split(" ")[0]}}</view>
					<view>{{detail.txTime.split(" ")[1]}}</view>
				</view>
				<view class="time" v-if="detail.txStatus==2" >
					<view>{{detail.dkTime.split(" ")[0]}}</view>
					<view>{{detail.dkTime.split(" ")[1]}}</view>
				</view>
			</view>
			<view class="middle">
				<view class="lineItem flex-aj-center">
					<view class="circle flex-aj-center" >
						<view ></view>
					</view>
					<view class="border" v-if="detail.txStatus==2" ></view>
				</view>
				<view class="lineItem flex-aj-center last" v-if="detail.txStatus==2" >
					<view class="circle flex-aj-center" >
						<view ></view>
					</view>
					<view class="border" ></view>
				</view>
			</view>
			<view class="right">
				<view class="content" >
					<view class="status">平台审核中</view>
					<view class="desc">平台将在1-7个工作日内完成审核</view>
				</view>
				<view class="content" v-if="detail.txStatus==2" >
					<view class="status">审核通过</view>
					<view class="desc">提现成功，资金已打款至您的账户</view>
				</view>
			</view>
		</view>
		<view class="txInfo">
			<view class="flex-between-center">
				<view>提现账户</view>
				<view>{{detail.gsBankName || 0}}</view>
			</view>
			<view class="flex-between-center">
				<view>账户户主</view>
				<view>{{detail.ckrName || 0}}</view>
			</view>
			<view class="flex-between-center">
				<view>提现时间</view>
				<view>{{detail.txTime || 0}}</view>
			</view>
			<view class="flex-between-center" v-if="detail.txStatus>0">
				<view>提现状态</view>
				<view>{{detail.txStatus==0?'未提现':detail.txStatus==1?'待打款':'已打款'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getWithdrawDetail
	} from "@/api/user.js"
	export default {
		data(){
			return{
				detail:{}
			}
		},
		onLoad(options) {
			this.getDetail(options.id)
		},
		methods:{
			getDetail(id){
				console.log(id)
				getWithdrawDetail({
					id
				}).then(res=>{
					console.log(res)
					this.detail = res.data
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped >
	.recordDetail{
		padding: 0 24rpx;
		.money{
			flex-direction: column;
			padding: 80rpx 0;
			:first-child{
				height: 64rpx;
				font-family: D-DIN;
				font-weight: bold;
				font-size: 64rpx;
				color: #FF2E1F;
				line-height: 64rpx;
				margin-bottom: 16rpx;
			}
			:last-child{
				width: 702rpx;
				height: 28rpx;
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 28rpx;
				color: #1F1F1F;
				line-height: 28rpx;
				text-align: center;
				font-style: normal;
			}
		}
		.list{
			background: #FAFCFF;
			border-radius: 24rpx;
			border: 2rpx solid #F5F7FA;
			padding: 32rpx 24rpx;
			.left{
				.time{
					margin-bottom: 48rpx;
					:first-child{
						font-family: PingFangSC;
						font-weight: 500;
						font-size: 28rpx;
						color: #292929;
						line-height: 28rpx;
						text-align: right;
						font-style: normal;
						margin-bottom: 14rpx;
					}
					:last-child{
						height: 40rpx;
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 40rpx;
						text-align: right;
						font-style: normal;
					}
				}
			}
			.middle{
				margin: 0 24rpx;
				text-align: center;
				.lineItem{
					margin-bottom: 14rpx;
					text-align: center;
					flex-direction: column;
					.circle{
						width: 28rpx;
						height: 28rpx;
						margin-bottom: 14rpx;
						view{
							width: 8rpx;
							height: 8rpx;
							background: #999999;
							border-radius: 50%;
						}
					}
					.border{
						width: 2rpx;
						height: 76rpx;
						background: #EBEBEB;
					}
					&.last{
						.circle{
							width: 28rpx;
							height: 28rpx;
							background: #3385FF;
							border-radius: 14rpx;
							view{
								width: 12rpx;
								height: 12rpx;
								background: #FFFFFF;
								border-radius: 50%;
							}
						}
						.border{
							display: none;
						}
					}
				}
			}
			.right{
				.content{
					margin-bottom: 48rpx;
					&:last-child{
						margin-bottom: 0;
					}
					.status{
						height: 28rpx;
						font-family: PingFangSC;
						font-weight: 500;
						font-size: 28rpx;
						color: #292929;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
						margin-bottom: 16rpx;
					}
					.desc{
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 40rpx;
						text-align: left;
						font-style: normal;
					}
					.img{
						margin-top: 16rpx;
						image{
							width: 126rpx;
							height: 122rpx;
							background: #D8D8D8;
							border-radius: 8rpx;
							margin-right: 20rpx;
						}
					}
				}
			}
		}
		.txInfo{
			padding-top: 48rpx;
			>view{
				margin-bottom: 48rpx;
				:first-child{
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 32rpx;
					color: #666666;
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
				}
				:last-child{
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 32rpx;
					color: #292929;
					line-height: 32rpx;
					text-align: right;
					font-style: normal;
				}
			}
		}
	}
</style>